<template>
  <div class="search">
    <!--    navbar-->
    <div class="navbar">
      <van-nav-bar
        left-arrow
        title="商品搜索"
        @click-left="$router.push('/index')"
      />
    </div>
    <div class="body-div">
      <!--      搜索框-->
      <div class="search-div">
        <van-search
          v-model="searchString"
          background="#f7f7f7"
          class="search-input"
          placeholder="請輸入您搜索的商品"
          @cancel="onCancel"
        />
        <button class="search-btn" @click="goSearch(searchString)">搜索</button>
      </div>
      <!--      最近搜索-->
      <div class="history-div">
        <div v-if="historyList.length > 0" class="title">
          <div class="left">
            <p>最近搜索</p>
          </div>
          <div class="right">
            <van-icon name="delete-o" @click="clearList()" />
          </div>
        </div>
        <!--        搜索歷史-->
        <div class="body">
          <div
            v-for="item in historyList"
            :key="item"
            class="body-p"
            @click="$router.push(`/searchList?search=${item}`)"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getHistoryList, setHistoryList } from "@/utils/storage";

export default {
  name: "searchCom",
  components: {},
  data() {
    return {
      historyList: getHistoryList(),
      searchString: "",
    };
  },
  computed: {},
  methods: {
    goSearch(key) {
      const index = this.historyList.indexOf(key);
      if (this.searchString == "") {
        return false;
      } else {
        if (index !== -1) {
          this.historyList.splice(index, 1);
        }
        this.historyList.unshift(key);
        setHistoryList(this.historyList);
        this.$router.push(`/searchList?search=${this.searchString}`);
      }
    },
    onCancel() {
      this.searchString = "";
    },
    clearList() {
      this.historyList = [];
      setHistoryList([]);
    },
  },
  created() {},
};
</script>
<style lang="less">
.search {
  .navbar {
  }

  .body-div {
    background-color: #f7f7f7;
    height: 700px;

    .search-div {
      display: flex;
      justify-content: center;
      align-items: center;

      .search-input {
        width: 95%;

        .van-search__content {
          background-color: #fff;
        }
      }

      .search-btn {
        border: none;
        height: 33px;
        width: 80px;
        background-color: #fa2209;
        color: #fff;
        margin-left: -10px;
        margin-right: 10px;
        border-radius: 0px 4px 4px 0px;
      }
    }

    .history-div {
      .title {
        padding: 5px 20px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        .left {
          color: #868383;
        }

        .right {
          font-size: 18px;
        }
      }

      .body {
        display: flex;
        flex-wrap: wrap;
        padding: 0px 10px;

        .body-p {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 30%;
          height: 30px;
          margin: 0 5px 15px;
          border: #efefef 1px solid;
          background-color: #fff;
          border-radius: 16px;
        }
      }
    }
  }
}
</style>
